<template>
  <layout>
    <div class="recommend">
      <div class="top-bar">
        <div class="btn btn-back" @click="$router.back()">返回</div>
        <div class="right-btn-group">
          <div class="btn btn-save">保存</div>
          <div class="btn btn-submit">提交</div>
        </div>
      </div>
      <div class="content">
        <div class="title">2021民主推荐采集</div>
        <div class="notice-row" @click="showInstruction">
          <div class="notice">
            <van-icon name="warning" />
            <div class="text">操作说明</div>
            <van-icon name="play" />
          </div>
        </div>
        <div>
          <div class="card">
            <div class="card-header">
              <div class="card-header-left">推荐职务:测试职务1</div>
              <div class="card-header-right">职务要求</div>
            </div>
            <div class="card-content">
              <div class="status-bar">
                <div class="status-bar-left">
                  可选:<span>3人</span>已选:<span>
                    <span class="selected-count">2人</span>
                    <van-icon name="arrow-down" />
                  </span>
                </div>
                <div class="status-bar-right">3/5</div>
              </div>
              <div class="person-list">
                <div class="person-info-wrapper">
                  <div class="person-name">吴尚香</div>
                  <div class="person-info">女，33岁，现任北美司综合处副处长</div>
                </div>
                <div class="person-info-wrapper">
                  <div class="person-name">张国强</div>
                  <div class="person-info">男，38岁，现任办公厅综合处副处长</div>
                </div>
                <div class="person-info-wrapper">
                  <div class="person-name">吴尚香</div>
                  <div class="person-info">女，33岁，现任北美司综合处副处长</div>
                </div>
                <div class="person-info-wrapper">
                  <div class="person-name">张国强</div>
                  <div class="person-info">男，38岁，现任办公厅综合处副处长</div>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <div class="footer-inner">
                <van-icon name="friends-o" />
                <span>推荐其他人员</span>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <div class="card-header-left">推荐职务:测试职务1</div>
              <div class="card-header-right">职务要求</div>
            </div>
            <div class="card-content">
              <div class="status-bar">
                <div class="status-bar-left">
                  可选:<span>3人</span>已选:<span>
                    <span class="selected-count">2人</span>
                    <van-icon name="arrow-down" />
                  </span>
                </div>
                <div class="status-bar-right">3/5</div>
              </div>
              <div class="person-list">
                <div class="person-info-wrapper">
                  <div class="person-name">吴尚香</div>
                  <div class="person-info">女，33岁，现任北美司综合处副处长</div>
                </div>
                <div class="person-info-wrapper">
                  <div class="person-name">张国强</div>
                  <div class="person-info">男，38岁，现任办公厅综合处副处长</div>
                </div>
                <div class="person-info-wrapper">
                  <div class="person-name">吴尚香</div>
                  <div class="person-info">女，33岁，现任北美司综合处副处长</div>
                </div>
                <div class="person-info-wrapper">
                  <div class="person-name">张国强</div>
                  <div class="person-info">男，38岁，现任办公厅综合处副处长</div>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <div class="footer-inner">
                <van-icon name="friends-o" />
                <span>推荐其他人员</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model="isInstructionShow" round closeable class="notice-popup">
        <div class="notice-content-wrapper">
          <div class="title">操作说明</div>
          <div class="content">
            操作说明操作说明操作说明操作说明操作说明
          </div>
        </div>
      </van-popup>
    </div>
  </layout>
</template>

<script>
export default {
  data() {
    return {
      isInstructionShow: false
    };
  },
  methods: {
    showInstruction() {
      this.isInstructionShow = true;
    }
  }
};
</script>

<style lang="less" scoped>
.recommend{
  display: flex;
  flex-direction: column;
  height: 100%;
  .top-bar{
    display: flex;
    padding: 28px 40px;
    height: 104px;
    box-sizing: border-box;
    .btn{
      height: 50px;
      line-height: 50px;
      background: #009AFD;
      color: #fff;
      font-size: 30px;
      text-align: center;
      padding: 0 20px;
      border-radius: 12px;
    }
    .right-btn-group{
      flex: 1;
      display: flex;
      justify-content: flex-end;
      .btn-submit{
        margin-left: 20px;
      }
    }
  }
  >.content{
    flex: 1;
    overflow-y: auto;
    font-size: 32px;
    padding: 0 40px 40px 40px;
    .title{
      font-size: 36px;
      font-weight: 600;
      text-align: center;
    }
    .notice-row{
      display: flex;
      .notice{
        flex: 1;
        display: flex;
        align-items: center;
        padding: 10px 0 30px 0;
        color: #FE9B00;
        .text{
          margin: 0 10px;
        }
        .text+*{
          transform: rotate(90deg);
        }
      }
    }
    .card{
      border-radius: 8px;
      overflow: hidden;
      background: #FAFAFA;
      margin-bottom: 40px;
      .card-header{
        display: flex;
        align-items: center;
        padding: 0 30px;
        height: 80px;
        background: #009CFE;
        color: #fff;
        font-size: 32px;
        .card-header-left{

        }
        .card-header-right{
          flex: 1;
          text-align: right;
        }
      }
      .card-content{
        .status-bar{
          display: flex;
          align-items: center;
          font-size: 26px;
          font-weight: 600;
          height: 80px;
          padding: 0 30px;
          .status-bar-left{
            >span{
              margin: 0 20px;
            }
            .selected-count{
              color: #6FC4FD;
            }
          }
          .status-bar-right{
            flex: 1;
            text-align: right;
          }
        }
        .person-info-wrapper{
          position: relative;
          margin: 0 30px;
          &:not(:first-child) {
            margin-top: 40px;
          }
          border-radius: 6px;
          box-shadow: 1px 2px 10px 3px rgba(0,0,0,.1);
          padding: 30px;
          border-left: 6px solid #009BFE;
          background: #fff;
          .person-name{

          }
          .person-info{
            margin-top: 16px;
            font-size: 26px;
            color: #989898;
          }
        }
      }
      .card-footer{
        padding: 30px 30px 40px 30px;
        .footer-inner{
          display: flex;
          align-items: center;
          font-size: 28px;
          color: #51B7FE;
          >span{
            text-decoration: underline;
          }
          /deep/.van-icon{
            font-size: 36px;
            margin-right: 10px;
          }
        }
      }
    }
  }
  /deep/.van-popup{
    width: 700px;
    box-sizing: border-box;
    padding: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .van-popup__close-icon{
      font-size: 30px;
    }
  }

  /deep/.van-popup.notice-popup{
    .notice-content-wrapper{
      font-size: 30px;
      .title{
        text-align: center;
        color: red;
      }
      .content{
        margin-top: 20px;
        line-height: 1.8;
        color: #355A73;
      }
    }
  }
}
</style>
